<template>
	<div class="webview-container" style="background-image: url('../../assets/image/gamebg.png') ;background-size: cover;background-position: center;">
		<!-- 强制刷新控制面板 -->
	 <div class="refresh-control-panel" style="position: fixed;top: 10px;right: 300px;z-index: 1000;">
			<button @click="hardRefreshWebview" class="refresh-btn">🔄 强制刷新</button>
		</div> 

		<!-- 倒计时显示 -->
		<div v-if="showCountdown" class="countdown-overlay" :style="{ backgroundImage: `url(${gameBg})` }">
			<div class="countdown-background" :style="{ backgroundImage: `url(${backgroundImg})` }">
				<img :src="countdownImages[countdown]" class="countdown-image" alt="倒计时" />
			</div>
		</div>

		<!-- webview 一直存在，只是在倒计时时视觉隐藏 -->
		<div >
			<webview  style="width: 100vw;height: 100vh;"
			:src="url" 
			class="webview-frame"
			nodeintegration="false"
			websecurity="false"
			allowpopups="true"
			disablewebsecurity="true"
			preload=""
			partition="persist:nocache"
			httpreferrer=""
		></webview>
		</div>

		

		

	</div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
// 临时用一个可靠的 URL 测试 webview 是否正常工作
const url = ref('')
const inputUrl = ref('')
const useElectronWebview = ref(true)
const configData = ref<any>({})
// 初始状态根据配置决定
const showCountdown = ref(true)
const countdown = ref(3)
const isShow = ref(false)

// 图片路径
const countdown1 = new URL('../../assets/image/1.png', import.meta.url).href
const countdown2 = new URL('../../assets/image/2.png', import.meta.url).href
const countdown3 = new URL('../../assets/image/3.png', import.meta.url).href
const backgroundImg = new URL('../../assets/image/daoshubg.png', import.meta.url).href
const gameBg = new URL('../../assets/image/gamebg.png', import.meta.url).href

// 图片映射
const countdownImages: Record<number, string> = {
	1: countdown1,
	2: countdown2,
	3: countdown3
}

// 开始倒计时函数
const startCountdown = () => {
	console.log('🎯 startCountdown 开始，当前时间:', new Date().toLocaleTimeString())
	
	// 检查是否需要倒计时
	if (configData.value?.game?.showCountdown === 0) {
		console.log('⚡ 配置为无倒计时，直接开始游戏')
		// 直接开始游戏，不显示倒计时
		showCountdown.value = false
		isShow.value = true
		
		// 向webview发送开始消息
		setTimeout(() => {
			sendBeginMessage()
		}, 100)
		return
	}
	
	// 重置倒计时状态
	countdown.value = 3
	showCountdown.value = true
	isShow.value = false
	
	console.log('⏰ 开始3秒倒计时，webview应该已经开始加载')
	
	// 开始倒计时
	const timer = setInterval(() => {
		countdown.value--
		console.log(`⏱️ 倒计时: ${countdown.value}`)
		
		if (countdown.value === 0) {
			clearInterval(timer)
			console.log('🎉 倒计时结束，显示webview，当前时间:', new Date().toLocaleTimeString())
			showCountdown.value = false
			isShow.value = true
			
			// 向webview发送开始消息
			setTimeout(() => {
				sendBeginMessage()
			}, 100)
		}
	}, 1000)
}

// 强制硬刷新webview
const hardRefreshWebview = () => {
	if (webviewElement && useElectronWebview.value) {
		try {
			console.log('强制刷新webview并清除缓存...')
			
			// 方法1: 先清除所有缓存和存储
			if (webviewElement.clearHistory) {
				webviewElement.clearHistory()
			}
			
			// 清除webview的所有存储
			if (webviewElement.getWebContents) {
				const webContents = webviewElement.getWebContents()
				if (webContents) {
					// 清除所有存储数据
					webContents.session.clearStorageData({
						storages: ['appcache', 'cookies', 'filesystem', 'indexdb', 'localstorage', 'shadercache', 'websql', 'serviceworkers', 'cachestorage']
					}).then(() => {
						console.log('webview存储数据已清除')
						// 清除HTTP缓存
						webContents.session.clearCache().then(() => {
							console.log('webview HTTP缓存已清除')
							// 重新加载页面
							if (webviewElement.reload) {
								webviewElement.reload()
							} else {
								// 降级方案：重新设置URL
								const currentUrl = url.value
								url.value = ''
								setTimeout(() => {
									url.value = currentUrl + '?_refresh=' + Date.now()
								}, 100)
							}
						})
					})
				}
			} else {
				// 如果无法获取webContents，使用降级方案
				console.log('使用降级方案刷新webview')
				const currentUrl = url.value
				// 添加随机参数强制刷新
				const separator = currentUrl.includes('?') ? '&' : '?'
				url.value = ''
				setTimeout(() => {
					url.value = currentUrl + separator + '_refresh=' + Date.now() + '&_cache_bust=' + Math.random()
				}, 100)
			}
		} catch (error) {
			console.warn('刷新失败，使用简单重载:', error)
			// 最后的降级方案
			const currentUrl = url.value
			const separator = currentUrl.includes('?') ? '&' : '?'
			url.value = ''
			setTimeout(() => {
				url.value = currentUrl + separator + '_refresh=' + Date.now() + '&_cache_bust=' + Math.random()
			}, 200)
		}
	}
}

onMounted(() => {
	
	console.log('📱 组件 onMounted 开始，当前时间:', new Date().toLocaleTimeString())
	
	// 从localStorage获取配置数据
	try {
		const storedConfig = localStorage.getItem('selconfigData')
		if (storedConfig) {
			const config = JSON.parse(storedConfig)
			console.log('📋 获取到的配置数据:', config)
			configData.value = config


		
			
			// 根据配置可能设置不同的URL
			updateUrlBasedOnConfig(config)
		}
	} catch (error) {
		console.warn('⚠️ 获取配置数据失败:', error)
	}
	
	// 根据配置设置初始状态
	if (configData.value?.game?.showCountdown === 0) {
		console.log('⚙️ 配置为无倒计时模式')
		showCountdown.value = false
		isShow.value = true
	} else {
		console.log('⚙️ 配置为有倒计时模式')
		showCountdown.value = true
		isShow.value = false
	}
	
	// 开始倒计时或直接开始游戏
	startCountdown()
	
	const webviewUrl = localStorage.getItem('webviewUrl')
	if (webviewUrl) {
		console.log('🔗 从localStorage获取webviewUrl:', webviewUrl)
		// 添加缓存清除参数
		const separator = webviewUrl.includes('?') ? '&' : '?'
		url.value = webviewUrl + separator + '_nocache=' + Date.now()
	}
	
	// 在组件挂载后获取webview元素
	nextTick(() => {
		console.log('⏭️ nextTick 执行，开始获取webview元素')
		updateWebviewRef()
		setupWebviewListeners()
	})
})

const getConfigValue = (value: any) => {
	if (typeof value === 'object' && value !== null) {
		// 处理配置对象，提取选中值
		return value.选中 || value.selected || JSON.stringify(value)
	}
	return value
}

// 获取webview元素的引用
let webviewElement: any = null

const updateUrlBasedOnConfig = (config: any) => {
	// 根据配置设置不同的网页
	// 这里可以根据具体的配置来决定加载什么网页
	console.log('根据配置更新URL:', config)
	
	// 示例：根据训练模式设置不同网页
	for (const [key, value] of Object.entries(config)) {
		const selectedValue = getConfigValue(value)
		
		if (key.includes('模式') || key.includes('mode')) {
			switch (selectedValue) {
				case '认知':
				case 'cognitive':
					inputUrl.value = 'https://example.com/cognitive-training'
					break
				case '记忆':
				case 'memory':
					inputUrl.value = 'https://example.com/memory-training'
					break
				case '注意力':
				case 'attention':
					inputUrl.value = 'https://example.com/attention-training'
					break
			}
		}
	}
}

const updateWebviewRef = () => {
	if (useElectronWebview.value) {
		webviewElement = document.querySelector('webview')
	} else {
		webviewElement = document.querySelector('iframe')
	}
}

const setupWebviewListeners = () => {
	console.log('🔧 setupWebviewListeners 开始设置监听器')
	
	if (webviewElement) {
		console.log('✅ webviewElement 存在，开始添加事件监听')
		
		// 页面加载完成事件
		webviewElement.addEventListener('dom-ready', () => {
			console.log('🌐 Webview页面加载完成，当前时间:', new Date().toLocaleTimeString())
			// 禁用页面缓存
			disablePageCache()
			// 页面加载完成后发送配置数据
			sendConfigToWebview()
			// 注入通信桥梁
			injectCommunicationBridge()
		})
		
		// 页面加载开始事件
		webviewElement.addEventListener('did-start-loading', () => {
			console.log('🚀 Webview开始加载页面，当前时间:', new Date().toLocaleTimeString())
		})
		
		// 页面加载失败事件
		webviewElement.addEventListener('did-fail-load', (event: any) => {
			console.error('❌ Webview加载失败:', event)
		})
		
		// 新窗口事件
		webviewElement.addEventListener('new-window', (event: any) => {
			console.log('Webview尝试打开新窗口:', event.url)
		})
					// 控制台消息
		webviewElement.addEventListener('console-message', (event: any) => {
			console.log('Webview控制台:', JSON.stringify(event.message))
			
			// 检查控制台消息中是否有我们的通信数据
			try {
				const message = event.message
				if (message && message.startsWith('PC_MESSAGE:')) {
					const data = JSON.parse(message.replace('PC_MESSAGE:', ''))
					console.log('通过控制台收到消息:', data)
					handleWebviewMessage(data.type, [data.payload])
				}
			} catch (error) {
				// 忽略解析错误，不是我们的消息
			}
		})
		
		// 监听来自webview的消息 - 方法1: ipc-message
		webviewElement.addEventListener('ipc-message', (event: any) => {
			console.log('收到webview IPC消息:', event.channel, event.args)
			handleWebviewMessage(event.channel, event.args)
		})
		
		// 监听DOM变化 - 方法2: 通过DOM监听
		const observer = new MutationObserver((mutations) => {
			mutations.forEach((mutation) => {
				if (mutation.type === 'attributes' && mutation.attributeName === 'data-message') {
					const target = mutation.target as HTMLElement
					const message = target.getAttribute('data-message')
					if (message) {
						try {
							const data = JSON.parse(message)
							console.log('收到DOM消息:', data)
							handleWebviewMessage(data.type, [data.payload])
							// 清除消息，避免重复处理
							target.removeAttribute('data-message')
						} catch (error) {
							console.error('解析DOM消息失败:', error)
						}
					}
				}
			})
		})
		
		// 监听webview的DOM变化
		setTimeout(() => {
			const webviewDoc = webviewElement.contentDocument || webviewElement.getWebContents?.()
			if (webviewDoc) {
				observer.observe(webviewDoc.body || webviewDoc, {
					attributes: true,
					subtree: true
				})
			}
		}, 1000)
	}
}









// 禁用页面缓存
const disablePageCache = () => {
	if (!webviewElement || !useElectronWebview.value) return
	
	try {
		const cacheDisableScript = `
			// 禁用浏览器缓存
			if ('serviceWorker' in navigator) {
				navigator.serviceWorker.getRegistrations().then(registrations => {
					registrations.forEach(registration => registration.unregister());
				});
			}
			
			// 清除本地存储
			try {
				localStorage.clear();
				sessionStorage.clear();
			} catch(e) {
				console.log('清除存储失败:', e);
			}
			
			// 添加无缓存的meta标签
			const metaTags = [
				{ name: 'Cache-Control', content: 'no-cache, no-store, must-revalidate' },
				{ name: 'Pragma', content: 'no-cache' },
				{ name: 'Expires', content: '0' }
			];
			
			metaTags.forEach(tag => {
				const meta = document.createElement('meta');
				meta.setAttribute('http-equiv', tag.name);
				meta.setAttribute('content', tag.content);
				document.head.appendChild(meta);
			});
			
			console.log('页面缓存已禁用');
		`
		
		webviewElement.executeJavaScript(cacheDisableScript)
		console.log('缓存禁用脚本已注入')
		
	} catch (error) {
		console.error('注入缓存禁用脚本失败:', error)
	}
}

// 注入通信桥梁到webview
const injectCommunicationBridge = () => {
	if (!webviewElement || !useElectronWebview.value) return
	
	try {
		const bridgeScript = `
			// 创建通信桥梁对象
			window.electronBridge = {
				// 方法1: 通过console.log发送消息（最可靠）
				sendToPC: function(type, data) {
					try {
						const message = {
							type: type,
							payload: data,
							timestamp: Date.now()
						};
						
						// 通过console.log发送，PC端会监听控制台消息
						console.log('PC_MESSAGE:' + JSON.stringify(message));
						
						// 备用方法：通过DOM属性
						document.body.setAttribute('data-message', JSON.stringify(message));
						setTimeout(() => {
							document.body.removeAttribute('data-message');
						}, 100);
						
					} catch (error) {
						console.error('发送消息到PC失败:', error);
					}
				},
				
				// 获取PC端传来的配置
				getConfig: function() {
					return window.electronConfig || {};
				}
			};
			
			// 为了兼容，也在window上暴露快捷方法
			window.sendToPC = window.electronBridge.sendToPC;
			
			console.log('通信桥梁已注入，可使用 window.electronBridge 或 window.sendToPC');
		`
		
		webviewElement.executeJavaScript(bridgeScript)
		console.log('通信桥梁注入成功')
		
	} catch (error) {
		console.error('注入通信桥梁失败:', error)
	}
}

// 方法1: 通过postMessage发送数据到webview
const sendConfigToWebview = () => {
	if (!webviewElement || !useElectronWebview.value) return
	
	try {
		// 准备要发送的数据
		const dataToSend = {
			config: configData.value,
		}
		
		// 通过executeJavaScript注入数据
		const script = `
			// 接收配置数据
			window.electronConfig = ${JSON.stringify(dataToSend)};
			
			// 触发自定义事件
			window.dispatchEvent(new CustomEvent('electronConfigReceived', {
				detail: ${JSON.stringify(dataToSend)}
			}));
			
			// 如果页面有特定的接收函数，也调用它
			if (typeof window.receiveElectronData === 'function') {
				window.receiveElectronData(${JSON.stringify(dataToSend)});
			}
			
			console.log('收到Electron配置数据:', ${JSON.stringify(dataToSend)});
		`
		
		webviewElement.executeJavaScript(script)
		console.log('已发送配置数据到webview:', dataToSend)
		
	} catch (error) {
		console.error('发送配置数据失败:', error)
	}
}

// 向webview发送begin消息
const sendBeginMessage = () => {
	if (!webviewElement || !useElectronWebview.value) return
	
	try {
		// 发送begin消息
		const script = `
			// 触发begin事件
			window.dispatchEvent(new CustomEvent('electronMessage', {
				detail: 'begin'
			}));
			
			// 如果页面有特定的接收函数，也调用它
			if (typeof window.receiveElectronMessage === 'function') {
				window.receiveElectronMessage('begin');
			}
			
			console.log('收到Electron begin消息');
		`
		
		webviewElement.executeJavaScript(script)
		console.log('已发送begin消息到webview')
		
	} catch (error) {
		console.error('发送begin消息失败:', error)
	}
}

// 方法2: 通过localStorage/sessionStorage共享数据
const shareDataViaStorage = (data: any) => {
	if (!webviewElement || !useElectronWebview.value) return
	
	try {
		const script = `
			// 将数据存储到localStorage
			localStorage.setItem('electronSharedData', '${JSON.stringify(data)}');
			sessionStorage.setItem('electronSharedData', '${JSON.stringify(data)}');
			
			// 触发storage事件
			window.dispatchEvent(new StorageEvent('storage', {
				key: 'electronSharedData',
				newValue: '${JSON.stringify(data)}',
				storageArea: localStorage
			}));
		`
		
		webviewElement.executeJavaScript(script)
		console.log('已通过storage共享数据:', data)
		
	} catch (error) {
		console.error('通过storage共享数据失败:', error)
	}
}


// 测试webview通信
const testWebviewCommunication = () => {
	if (!webviewElement || !useElectronWebview.value) {
		console.log('webview不可用')
		return
	}
	
	console.log('测试向webview发送消息...')
	
	// 发送测试消息
	const testScript = `
		console.log('PC端测试消息已送达');
		if (window.sendToPC) {
			window.sendToPC('test-response', {
				message: 'webview收到测试消息',
				timestamp: Date.now()
			});
		} else {
			console.log('window.sendToPC 不可用');
		}
	`
	
	try {
		webviewElement.executeJavaScript(testScript)
		console.log('测试脚本已发送')
	} catch (error) {
		console.error('发送测试脚本失败:', error)
	}
}

// 处理来自webview的消息
const handleWebviewMessage = (channel: string, args: any[]) => {
	console.log('处理webview消息:', channel, args)
	
	switch (channel) {
		case 'request-config':
			// webview请求配置数据
			sendConfigToWebview()
			break
			
		case 'update-config':
			// webview更新配置
			if (args[0]) {
				configData.value = { ...configData.value, ...args[0] }
				localStorage.setItem('selconfigData', JSON.stringify(configData.value))
				console.log('配置已更新:', configData.value)
			}
			break
			
		case 'event':
			// webview发送事件
			console.log('Webview事件:', ...args)
			console.log(args)

			// @ts-ignore
			if (args[0].message === 'out') {
				let user = JSON.parse(localStorage.getItem('user') || '{}')
				let taskId: any = localStorage.getItem('taskId')
				if (!taskId) {
					taskId = {
						id: ''
					}
				} else {
					taskId = JSON.parse(taskId)
				}
				let resource = localStorage.getItem('resource')
				if (router.options.history.state.back == '/') {
		taskId.id=''
		taskId.executionNumber = ''
		resource = '1'
	 }
				window.request?.('/task/actionTask', {
					method: 'POST', body: {
						id: localStorage.getItem('scaleId'),
						taskId: taskId.id,
						executionNumber: taskId.executionNumber,
						patientId: user.id,
						resource:resource,
						action: 4,
						linkName:configData.value.game.name,
						linkId:configData.value.game.id,
						type: 1
					}
				})
				// 退出
				router.push('/')
			} 
					// @ts-ignore
				if (args[0].message === 'reset') {
				// 重新开始倒计时和重新加载页面
				hardRefreshWebview()
				startCountdown()
			} 

		// @ts-ignore
		if (args[0].message === 'pause') {
				// 暂停
				let user = JSON.parse(localStorage.getItem('user') || '{}')
				let taskId: any = localStorage.getItem('taskId')
				if (!taskId) {
					taskId = {
						id: ''
					}
				} else {
					taskId = JSON.parse(taskId)
				}
			let resource = localStorage.getItem('resource')
			if (router.options.history.state.back == '/') {
		taskId.id=''
		taskId.executionNumber = ''
		resource = '1'
	 }
				window.request?.('/task/actionTask', {
					method: 'POST', body: {
						id: localStorage.getItem('scaleId'),
						taskId: taskId.id,
						executionNumber: taskId.executionNumber,
						patientId: user.id,
						resource:resource,
						action: 2,
						linkName:configData.value.game.name,
						linkId:configData.value.game.id,
						type: 1
					}
				})
			} 


				// @ts-ignore
		if (args[0].message === 'restart') {
				// 暂停重新开始
				let user = JSON.parse(localStorage.getItem('user') || '{}')
				let taskId: any = localStorage.getItem('taskId')
				if (!taskId) {
					taskId = {
						id: ''
					}
				} else {
					taskId = JSON.parse(taskId)
				}
			let resource = localStorage.getItem('resource')
			if (router.options.history.state.back == '/') {
		taskId.id=''
		taskId.executionNumber = ''
		resource = '1'
	 }
				window.request?.('/task/actionTask', {
					method: 'POST', body: {
						id: localStorage.getItem('scaleId'),
						taskId: taskId.id,
						executionNumber: taskId.executionNumber,
						patientId: user.id,
						resource:resource,
						action: 1,
						linkName:configData.value.game.name,
						linkId:configData.value.game.id,
						type: 1
					}
				})
			} 

			
			if (args[0].message === 'over' && args[0] && args[0].data && args[0].data.id) {

				let user = JSON.parse(localStorage.getItem('user') || '{}')
				let taskId: any = localStorage.getItem('taskId')
				if (!taskId) {
					taskId = {
						id: ''
					}
				} else {
					taskId = JSON.parse(taskId)
				}
				let resource = localStorage.getItem('resource')
				if (router.options.history.state.back == '/') {
		taskId.id=''
		taskId.executionNumber = ''
		resource = '1'
	 }
				window.request?.('/task/actionTask', {
					method: 'POST', body: {
						id: localStorage.getItem('scaleId'),
						taskId: taskId.id,
						executionNumber: taskId.executionNumber,
						patientId: user.id,
						resource:resource,
						action: 3,
						linkName:configData.value.game.name,
						linkId:configData.value.game.id,
						type: 1
					}
				})
				// 退出
				router.push({
				path: '/tableGame',
				query: {
					id: args[0].data.id,
					game:1
				}
			})
			} 
		
			break

			case 'getConfig':
			// webview发送事件
			sendConfigToWebview()
			// @ts-ignore
			// window.messageRef?.show(JSON.stringify(...args),'success')
			break

			case 'over':
		
			// @ts-ignore
			// window.messageRef?.show(JSON.stringify(...args), 'success')
			// 游戏结束

			break
			
		case 'test-response':
			// 测试响应
			console.log('✅ 通信测试成功! 收到webview响应:', ...args)
			break
			
		case 'user-action':
			// 用户操作事件
			console.log('用户操作:', args[0])
			// 可以在这里处理用户的各种操作
			break
			
		case 'game-result':
			// 游戏结果
			console.log('游戏结果:', args[0])
			// 保存游戏结果到本地或发送到服务器
			if (args[0]) {
				localStorage.setItem('lastGameResult', JSON.stringify(args[0]))
			}
			break
			
		case 'training-progress':
			// 训练进度
			console.log('训练进度:', args[0])
			break
			
		case 'error-report':
			// 错误报告
			console.error('Webview错误报告:', args[0])
			break
			
		case 'page-ready':
			// 页面准备就绪
			console.log('页面准备就绪:', args[0])
			// 可以在这里发送初始数据
			sendConfigToWebview()
			break
			
		default:
			console.log('未处理的webview消息:', channel, args)
	}
}
</script>

<style scoped>
.webview-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f5f5;
}

.webview-frame {
	flex: 1;
	width: 100%;
	border: none;
	background: #fff;
}

.control-panel {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border-bottom: 1px solid #ddd;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	flex-shrink: 0;
}

.url-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}

.load-btn, .nav-btn {
	padding: 8px 16px;
	background: #2176b8;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

.load-btn:hover, .nav-btn:hover {
	  background: var(--theme-primary);
}

.nav-btn {
	background: #666;
	padding: 8px 12px;
}

.nav-btn:hover {
	background: #555;
}

.webview-toggle {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	cursor: pointer;
}

.webview-toggle input[type="checkbox"] {
	margin: 0;
}

.config-info {
	background: #fff;
	padding: 10px;
	border-top: 1px solid #ddd;
	max-height: 150px;
	overflow-y: auto;
	flex-shrink: 0;
}

.config-info h4 {
	margin: 0 0 10px 0;
	color: #333;
	font-size: 14px;
}

.config-item {
	margin-bottom: 5px;
	font-size: 12px;
	color: #666;
}

.config-item strong {
	color: #333;
	margin-right: 5px;
}

.refresh-control-panel {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
}

.refresh-btn {
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.refresh-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
	background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.refresh-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 倒计时样式 */
.countdown-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.countdown-background {
	background-size: cover;
	background-position: center;
	width: 300px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	animation: countdownPulse 1s ease-in-out infinite;
}

.countdown-image {
	width: 60%;
	height: 60%;
	object-fit: contain;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

@keyframes countdownPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
</style>